<!-- <!DOCTYPE html> -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2020050606012王超</title>
    <link rel="icon" href="./images/weblogo.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/Index.css">
    <link rel="stylesheet" href="./css/g-bar.css">
    <script src="./js/g-bar.js"></script><!--标题效果-->
    <script src="./js/index.js"></script><!--页面效果-->
</head>
<body style="overflow:auto ! important;">
    <!--头部标题栏-->
    <a href="javascript:;" name="top"></a>
    <div class="tabbar">
        <div class="barcent">
            <div class="logo">
                <a href="./pages/dex.html" target="iframe" id="indexbtn" onclick="indexbtn()">
                    <img src="images/logo.png" alt="Logo"/>
                </a>
            </div>

            <!-- items -->
            <div class="m-bar">
                <ul class="items">
                    <li class="frst">
                        <span>
                            <a href="./pages/dex.html" target="iframe" hidefocus="true" id="dexmusic" onclick="dex()" style="background:#000;color:#fff;">
                            <em>发现音乐</em>
                        </a>
                        </span>                        
                    </li>
                    <li>
                        <span>
                            <a href="./pages/mymenu.html" target="iframe" hidefocus="true" onclick="openmenu()" id="mymusic">
                            <em>我的音乐</em>
                            </a>
                        </span>                        
                    </li>
                    <li>
                        <span>
                            <a href="#" hidefocus="true">
                                <em>关注</em>
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="#" hidefocus="true" target="_blank">
                                <em>商城</em>
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="#" hidefocus="true" target="_blank">
                                <em>音乐人</em>
                            </a>
                        </span>
                    </li>
                    <li>
                        <span>
                            <a href="#" hidefocus="true">
                                <em>下载客户端</em>                                
                            </a>                           
                        </span> 
                    </li>
                    <div class="hottag">
                        <img src="images/hot.png" alt="">
                    </div>
                </ul>

                <!-- 搜索和登录 -->
                <div class="content">
                    <div class="search">
                        <span>
                            <img src="images/search.png" alt="">
                            <input type="text" name="" id="" placeholder="音乐/视频/电台/用户"/>
                        </span>                        
                    </div>                    
                    <span>
                        <a href="#" class="useradd">
                            <em>创作者中心</em>
                        </a>
                    </span>
                    <div class="user">
                        <span>
                            <a href="#" hidefocus="true">登录</a>
                        </span>                        
                    </div>               
                </div>
            </div>

            <!-- tag -->
            <div class="tag">
                <span class="tagitem">&nbsp;&nbsp;
                    <table class="taglist">
                        <tr>
                            <td id="list1">
                                <!--发现音乐-->
                            </td>
                            <td id="list2">
                                <!--我的音乐-->
                            </td>
                            <td id="list3"><!--关注--></td>
                            <td id="list4"><!--商城--></td>
                            <td id="list5"><!--音乐人--></td>
                            <td id="list6"><!--下载客户端--></td>
                            <td id="list7"><!--搜索--></td>
                            <td id="list8"><!--登录--></td>
                        </tr>
                    </table>
                </span>
            </div>
            <img src="./images/red.png" alt="" class="list1-img" id="list-img">       
        </div>

        <!-- tag栏的背景颜色 -->
        <div class="tagboth" id="tagboth">                        
        </div>

        <!-- 红色导航栏 -->
        <div class="tabbar2" id="tabbar2">
            <div class="barcent2">
                <ul class="nav">
                    <li>
                        <a href="#" hidefocus="true" style="background-color:#9B0909;">
                            <em>推荐</em>
                        </a>
                    </li>
                    <li>
                        <a href="#" hidefocus="true">
                            <em>排行榜</em>
                        </a>
                    </li>
                    <li>
                        <a href="#" hidefocus="true">
                            <em>歌单</em>
                        </a>
                        <span>
                            <sup>&reg;</sup>
                        </span>
                    </li>
                    <li>
                        <a href="#" hidefocus="true">
                            <em>主播电台</em>
                        </a>
                    </li>
                    <li>
                        <a href="#" hidefocus="true">
                            <em>歌手</em>
                        </a>
                    </li>
                    <li>
                        <a href="#" hidefocus="true">
                            <em>新碟上架</em>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <!-- 浮动框架页面主题内容[dex.html] -->
    <iframe src="pages/dex.html" frameborder="0" name="iframe" id="iframe"></iframe>

    
    <!-- 底部播放栏 -->
    <div class="playerbar" id="playerbar">
        <div class="player-wrap" id="player-wrap">

            <!-- 播放按钮 -->
            <div class="playbtns">
                <a class="last" id="last" href="javascript:;" title="上一首"></a>
                <a class="play" id="play" onclick="playsong()" href="javascript:;" title="播放/暂停"></a>
                <a class="next" id="next" href="javascript:;" title="下一首"></a>
            </div>

            <!-- 歌曲图片 -->
            <div class="songhead">

                <!-- 图片 -->
                <img src="./music/imgages/1.jpg" id="songhead" alt=""/>

                <!-- 高光背景图 -->
                <a href="javascript:;" class="song-msk"></a>
            </div>

            <!-- 进度和播放时间 -->
            <div class="playbox" id="playbox">
                <!-- 歌曲标题 -->
                <div class="playwrap">
                    <div class="playtitle">
                        <a href="javascript:;" id="song-name" title="海阔天空" class="song-name">海阔天空</a>
                        <a href="javascript:;" id="song-singer" title="Beyond" class="song-name song-people">Beyond</a>
                        <a href="javascript:;" class="song-src" title="来自 我的歌单"></a>
                    </div>
                </div>

                <!-- 进度条DIV容器 -->
                <div class="progress-bar" id="progress-bar">
                    <!-- 进度条bg -->
                    <div class="playbar-bg" id="playbar-bg"></div>

                    <!-- 当前播放的进度 -->
                    <div class="cur" id="cur" style="width:0%;">
                        <span class="playbar-btn" id="playbar-btn"></span>
                    </div>
                    

                    <!-- 播放的时间 -->
                    <div class="playtime" id="playtime">
                        <em id="nowplaytime" class="nowplaytime">00:00</em>&nbsp;/&nbsp;<span id="nowdurtime">00:00</span>
                    </div>
                </div>                
            </div>

            <!-- 收藏和分享 -->
            <div class="option-wrap">
                <a href="javascript:;" title="画中画" class="option-pip"></a>
                <a href="javascript:;" title="收藏" class="option-addsong"></a>
                <a href="javascript:;" title="分享" class="option-share" onclick="showwrap()"></a>
            </div>

            <span class="dd"></span>

            <!-- 音量和播放模式 -->
            <div class="kzwrap">

                <!-- 音量按钮 -->
                <a href="javascript:;" class="volumeicn" id="volumeicn" onclick="volume()"></a>
                <!-- 调节容器 -->
                <div class="volume-wrap" id="volume-wrap" style="display:none;">
                    <!-- 半透明背景 -->
                    <div class="volume-wrap-bg"></div>
                    <!-- 音量的深色背景 -->
                    <div class="sound-bg" id="sound-bg"></div>
                    <!-- 当前音量控制条 -->
                    <div class="volume-curr" id="volume-curr" style="height:65px;z-index: 990;">
                        <!-- 当前音量拖动按钮 -->
                        <span class="volume-curr-btn" id="volume-curr-btn" style="margin-top:-10px;"></span>
                        <div class="curr-btn-bg"></div>
                    </div>
                </div>

                <!-- 播放模式 -->
                <a href="javascript:;" id="typeicn" class="typeicn" onclick="typeicn()" title="播放模式"></a>
                <!-- 播放模式弹出信息 -->
                <div class="tip" style="display:none;">随机</div>

                <!-- 播放列表 -->
                <a href="javascript:;" class="listicn" onclick="list()" title="播放列表">4</a>
            </div>
        </div>

        <!-- 播放列表和歌词 -->
        <div class="songlist-wrap" id="songlist-wrap" style="display:none;">
            <!-- 播放列表顶部 -->
            <div class="songlist-head">
                <h4>播放列表<span>(4)</span></h4>
                <a href="javascript:;" class="addall">                    
                    <span class="add-icn"></span>
                    收藏全部
                </a>

                <span class="line"></span>

                <a href="javascript:;" class="clear">                    
                    <span class="del-icn"></span>
                    清除
                </a>

                <!-- 歌曲名 -->
                <p class="songlist-title" id="songlist-title">
                    海阔天空
                </p>

                <!-- 关闭按钮 -->
                <span class="listclose" onclick="listclose()"></span>
            </div>
            

            <!-- 播放主体 -->
            <div class="list-body">
                <!-- 歌曲名字 -->
                <div class="songname-wrap">
                    <li onclick="songnameclick1()" id="li1">
                        <div class="col-1" id="col-1"></div>

                        <!-- 名字 -->
                        <div class="col-2" style="color:#fff;">海阔天空</div>
                        <div class="col-3">                         
                            <i title="收藏" class="i-add"></i>
                            <i title="分享" class="i-share"></i>
                            <i title="下载" class="i-dwn"></i>
                            <i title="删除" class="i-del"></i>
                        </div>
                        <div class="col-4">
                            <a href="javascript:;" title="Beyond">Beyond</a>
                        </div>
                        <div class="col-5">05&nbsp;:&nbsp;23</div>
                        <div class="col-6">
                            <a href="javascript:;" title="来自 我的歌单"></a>
                        </div>
                    </li>  
                    <li onclick="songnameclick2()" id="li2">
                        <div class="col-1" id="col-2"></div>

                        <!-- 名字 -->
                        <div class="col-2" style="color:#fff;">一路向北</div>
                        <div class="col-3">                         
                            <i title="收藏" class="i-add"></i>
                            <i title="分享" class="i-share"></i>
                            <i title="下载" class="i-dwn"></i>
                            <i title="删除" class="i-del"></i>
                        </div>
                        <div class="col-4">
                            <a href="javascript:;" title="周杰伦(Jay Chou)">周杰伦(Jay Chou)</a>
                        </div>
                        <div class="col-5">04&nbsp;:&nbsp;55</div>
                        <div class="col-6">
                            <a href="javascript:;" title="来自 我的歌单"></a>
                        </div>
                    </li>
                    <li onclick="songnameclick3()" id="li3">
                        <div class="col-1" id="col-3"></div>

                        <!-- 名字 -->
                        <div class="col-2" style="color:#fff;">珊瑚海</div>
                        <div class="col-3">                         
                            <i title="收藏" class="i-add"></i>
                            <i title="分享" class="i-share"></i>
                            <i title="下载" class="i-dwn"></i>
                            <i title="删除" class="i-del"></i>
                        </div>
                        <div class="col-4">
                            <a href="javascript:;" title="周杰伦/Lara梁心颐">周杰伦/Lara梁心颐</a>
                        </div>
                        <div class="col-5">04&nbsp;:&nbsp;16</div>
                        <div class="col-6">
                            <a href="javascript:;" title="来自 我的歌单"></a>
                        </div>
                    </li>
                    <li onclick="songnameclick4()" id="li4">
                        <div class="col-1" id="col-4"></div>

                        <!-- 名字 -->
                        <div class="col-2" style="color:#fff;">交换余生</div>
                        <div class="col-3">                         
                            <i title="收藏" class="i-add"></i>
                            <i title="分享" class="i-share"></i>
                            <i title="下载" class="i-dwn"></i>
                            <i title="删除" class="i-del"></i>
                        </div>
                        <div class="col-4">
                            <a href="javascript:;" title="林俊杰">林俊杰</a>
                        </div>
                        <div class="col-5" id="col-5">04&nbsp;:&nbsp;36</div>
                        <div class="col-6">
                            <a href="javascript:;" title="来自 我的歌单"></a>
                        </div>
                    </li>                  
                </div>

                <!-- 播放主体中间的间隔条和计算歌曲个数生成的滑动模块 -->
                <div class="bine-wrap">
                </div>

                <!-- 图片背景和颜色背景 -->
                <div class="lyric-imgbg" id="lyric-imgbg"></div>
                <div class="lyric-colorbg"></div>

                <!-- 右边歌词部分 -->
                <div class="lyric" id="lyric-wrap">                    
                    <!-- <p>我是靓仔</p>
                    <p>我是靓仔</p>
                    <p>我是靓仔</p> -->
                </div>

                <!-- 问好 -->
                <div class="wh">
                    <a href="javascript:;" class="icn-ask"></a>
                </div>
                
                <!-- 右边滚动条 -->
                <div class="bine-wrap-right">
                </div>
            </div>
        </div>

        <!-- 播放栏的浮动效果栏 -->
        <!-- <div class="float" id="float-bar" onmouseover="onfloat()"></div> -->

        <!-- 右浮动锁定按钮 -->
        <div class="lock" id="lock-bar">
            <a href="javascript:;" id="lockbtn" onclick="lockbtn()" class="lock-btn"></a>
        </div>

        

        <!-- 右浮动画中画 -->
        <!-- <div class="pip-wrap">
            <div class="pip-imgbg"></div>
            <div class="pip-colorbg"></div>

            <!-- 显示 -->
            <!-- <div class="pip-txt"></div>

            <!-- hover伪类 -->
            <!-- <div class="pip-hover"></div>
        </div> --> 

        <!-- 回顶按钮 -->
        <a href="#top" id="myBtn" class="gotop-btn" title="回到顶部">回到顶部</a>

        <!-- 分享按钮的弹出对话框 -->
        <div class="share-wrap" id="share-wrap" style="display: none;">
            <div class="share-bar">
                <div class="sharebar-title">
                    <span>登录</span>
                    <img src="./images/close.png" onclick="shareclose()" alt="">
                </div>

                <div class="sharebottom">
                    <div class="sharebottom-left">
                        <img src="./images/phone.png" width="125px" height="220px" alt="">
                    </div>

                    <div class="sharebottom-right">
                        <p>扫码登录</p>
                        <img src="./images/m.png" width="120px" alt="">
                        <p class="link-title">
                            使用<a href="javascript:;">网易云音乐app</a>扫码登录
                        </p>
                    </div>
                </div>

                <div class="share-bar-bottom">
                    <p>使用其他登录方式</p>
                </div>
            </div>
        </div>

        <!-- Audio标签 -->
        <audio src="./music/1.mp3" id="audio" preload="auto"></audio> <!--ondurationchange="playtime()" ontimeupdate="curtime()"-->
    </div>
</body>
<script>
    var songData=[
    {
        songname:'海阔天空',
        singer:'Beyond',
        songsrc:'./music/1.mp3',
        songimg:'./music/imgages/1.jpg',
        sonttime:'05:24',
        songlyric:'[ti:海阔天空][ar:BEYOND][al:乐与怒[00:00.00]海阔天空 - BEYOND[00:04.90]词：黄家驹[00:09.81]曲：黄家驹[00:14.71]编曲:BEYOND/梁邦彦[00:19.62]今天我寒夜里看雪飘过[00:26.04]怀着冷却了的心窝飘远方[00:31.97]风雨里追赶雾里分不清影踪[00:38.09]天空海阔你与我可会变[00:42.40]谁没在变[00:44.35]多少次迎着冷眼与嘲笑[00:50.99]从没有放弃过心中的理想[00:56.86]一刹那恍惚若有所失的感觉[01:03.16]不知不觉已变淡心里爱[01:07.45]谁明白我[01:09.86]原谅我这一生不羁放纵爱自由[01:16.82]也会怕有一天会跌倒oh no[01:22.97]背弃了理想谁人都可以[01:29.22]哪会怕有一天只你共我[01:43.81]今天我寒夜里看雪飘过[01:50.25]怀着冷却了的心窝飘远方[01:56.04]风雨里追赶雾里分不清影踪[02:02.41]天空海阔你与我可会变[02:06.63]谁没在变[02:08.97]原谅我这一生不羁放纵爱自由[02:16.00]也会怕有一天会跌倒oh no[02:22.22]背弃了理想谁人都可以[02:28.44]哪会怕有一天只你共我oh yeah[03:09.48]仍然自由自我永远高唱我歌走遍千里[03:20.71]原谅我这一生不羁放纵爱自由[03:27.74]也会怕有一天会跌倒oh no[03:33.92]背弃了理想谁人都可以[03:40.16]哪会怕有一天只你共我[03:46.46]背弃了理想谁人都可以[03:52.70]哪会怕有一天只你共我oh yeah[03:58.22]原谅我这一生不羁放纵爱自由oh yeah[04:05.16]也会怕有一天会跌倒oh[04:11.49]背弃了理想谁人都可以wow[04:17.61]哪会怕有一天只你共我',
    },
    {
        songname:'一路向北',
        singer:'周杰伦',
        songsrc:'./music/2.mp3',
        songimg:'./music/imgages/2.jpg',
        sonttime:'04:55',
        songlyric:'[ti:一路向北 (《头文字D》电影插曲)][ar:周杰伦][al:J III MP3 Player][by:][00:00.00]一路向北 - 周杰伦 (Jay Chou)[00:09.26]词：方文山[00:18.53]曲：周杰伦[00:27.80]编曲：蔡科俊[00:37.07]后视镜里的世界[00:40.50][00:44.42]越来越远的道别[00:47.98][00:48.90]你转身向背 侧脸还是很美[00:54.92][00:55.44]我用眼光去追 竟听见你的泪[01:02.39][01:05.89]在车窗外面徘徊 是我错失的机会[01:16.93][01:17.49]你站的方位 跟我中间隔着泪[01:23.64]街景一直在后退[01:26.81][01:27.39]你的崩溃在窗外零碎[01:31.60]我一路向北 离开有你的季节[01:37.72][01:38.85]你说你好累 已无法再爱上谁[01:45.96]风在山路吹[01:48.73]过往的画面全都是我不对[01:53.36][01:54.08]细数惭愧 我伤你几回[01:58.62][02:21.17]后视镜里的世界 越来越远的道别[02:31.33][02:32.88]你转身向背 侧脸还是很美[02:39.29]我用眼光去追 竟听见你的泪[02:45.82][02:49.72]在车窗外面徘徊 是我错失的机会[03:00.59][03:01.56]你站的方位 跟我中间隔着泪[03:07.46]街景一直在后退[03:10.54][03:11.15]你的崩溃在窗外零碎[03:15.01][03:15.53]我一路向北 离开有你的季节[03:21.64][03:22.90]你说你好累 已无法再爱上谁[03:29.94]风在山路吹[03:32.62]过往的画面全都是我不对[03:37.39][03:37.95]细数惭愧 我伤你几回[03:43.66][03:44.23]我一路向北 离开有你的季节[03:50.21][03:51.50]方向盘周围 回转着我的后悔[03:58.99]我加速超越[04:01.37]却甩不掉紧紧跟随的伤悲[04:05.87][04:06.75]细数惭愧我 伤你几回[04:11.37][04:13.82]停止狼狈就 让错纯粹'
    },
    {
        songname:'珊瑚海',
        singer:'周杰伦/Lara梁心颐',
        songsrc:'./music/3.mp3',
        songimg:'./music/imgages/3.jpg',
        sonttime:'04:16',
        songlyric:'[ti:珊瑚海][ar:周杰伦/Lara梁心颐][al:十一月的萧邦][by:][offset:0][00:00.00]珊瑚海 - 周杰伦 (Jay Chou)/Lara梁心颐 (lara Liang)[00:02.62]词：方文山[00:05.25]曲：周杰伦[00:07.87]编曲：钟兴民[00:10.50]制作人：周杰伦[00:13.12]男：[00:15.16]海平面远方开始阴霾[00:21.70]悲伤要怎么平静纯白[00:27.39]我的脸上始终挟带[00:33.78]一抹浅浅的无奈[00:41.24]女：[00:41.63]你用唇语说你要离开[00:45.30]男：[00:45.58]心不在[00:47.47]合：[00:48.10]那难过无声慢了下来[00:53.55]汹涌潮水你听明白[01:00.03]不是浪而是泪海[01:06.08]男：[01:06.78]转身离开[01:08.33]女：[01:08.39]你有话说不出来[01:10.60]男：[01:10.60]分手说不出来[01:11.95]合：[01:12.40]海鸟跟鱼相爱[01:15.58]只是一场意外[01:19.66]我们的爱[01:20.31]女：[01:20.32]给的爱[01:21.81]合：[01:22.32]差异一直存在[01:24.98]女：[01:25.40]回不来[01:26.44]男：[01:26.55]风中尘埃[01:27.70]合：[01:28.45]等待竟累积成伤害[01:32.71]转身离开[01:35.17]分手说不出来[01:38.59]蔚蓝的珊瑚海[01:41.87]错过瞬间苍白[01:44.80]男：[01:45.48]当初彼此[01:46.90]女：[01:46.90]你我都[01:47.99]合：[01:48.53]不够成熟坦白[01:51.59]女：[01:51.81]不应该[01:52.71]男：[01:52.79]热情不再[01:54.18]合：[01:54.44]你的笑容勉强不来[01:58.30]爱深埋珊瑚海[02:04.38]男：[02:06.81]毁坏的沙雕如何重来[02:13.48]有裂痕的爱怎么重盖[02:18.97]只是一切结束太快[02:25.86]你说你无法释怀[02:31.29]女：[02:32.86]贝壳里隐藏什么期待[02:37.23]男：[02:37.74]等花儿开[02:38.86]合：[02:39.88]我们也已经无心再猜[02:44.50]女：[02:45.36]面向海风[02:46.52]男：[02:46.93]面向海风[02:48.37]女：[02:48.48]咸咸的爱[02:49.96]男：[02:50.27]咸咸的爱[02:51.66]合：[02:51.98]尝不出还有未来[02:58.00]男：[02:58.55]转身离开[03:00.03]女：[03:00.19]你有话说不出来[03:02.22]男：[03:02.22]分手说不出来[03:03.74]合：[03:04.10]海鸟跟鱼相爱[03:07.28]只是一场意外[03:10.11]男：[03:11.05]我们的爱[03:12.54]女：[03:12.66]给的爱[03:13.62]合：[03:14.07]差异一直存在[03:16.97]女：[03:17.22]回不来[03:18.01]男：[03:18.40]风中尘埃[03:19.52]女：[03:19.72]等待[03:20.49]合：[03:20.77]竟累积成伤害[03:24.62]转身离开[03:27.12]分手说不出来[03:30.33]蔚蓝的珊瑚海[03:33.58]错过瞬间苍白[03:37.45]男：[03:37.89]当初彼此[03:39.01]女：[03:39.01]你我都[03:39.75]合：[03:40.24]不够成熟坦白[03:43.11]女：[03:43.37]不应该[03:44.47]男：[03:44.60]热情不再[03:45.84]合：[03:46.08]你的笑容勉强不来[03:50.10]爱深埋珊瑚海'
    },
    {
        songname:'交换余生',
        singer:'林俊杰',
        songsrc:'./music/4.mp3',
        songimg:'./music/imgages/4.jpg',
        sonttime:'04:36',
        songlyric:'[ti:交换余生][ar:林俊杰][al:交换余生][by:dongmei_karakal][offset:0][00:00.00]交换余生 (No Turning Back) - 林俊杰 (JJ Lin)[00:01.32]词：易家扬[00:01.91]曲：林俊杰 JJ LIN[00:02.79]编曲 & 键盘 MUSIC ARRANGEMENT & KEYBOARDS：简道生Dawson Chien/蔡政勋 Andy Tsai[00:05.58]制作人 PRODUCER：林俊杰 JJ LIN[00:06.90]配唱制作 VOCAL PRODUCTION：林俊杰 JJ LIN[00:08.52]制作协力 PRODUCTION ASSISTANCE：黄冠龙 ALEX.D/周信廷 SHiN CHOU/蔡沛蓁[00:11.17]弦乐编写 STRINGS ARRANGEMENT：王韵筑 Liv Wang[00:12.78]弦乐 STRINGS：李琪弦乐团[00:13.96]吉他 GUITAR：黄冠龙 ALEX.D[00:14.99]低音吉他 BASS GUITAR：寗子达[00:16.31]鼓 DRUMS：Brendan Buckley[00:16.90]和声编写 BACKGROUND VOCAL ARRANGEMENT：林俊杰 JJ LIN[00:18.66]和声 BACKGROUND VOCALS：林俊杰 JJ LIN[00:19.99]录音室 RECORDING STUDIOS：JFJ SANCTUARY (Taipei)/THE JFJ LAB (Taipei)/Smile录音棚 (Beijing)/East West Studios (Los Angeles)[00:21.90]录音师 RECORDING ENGINEERS：林俊杰 JJ LIN/周信廷 SHiN CHOU/李杰汇/Wil Anspach[00:24.84]鼓组音频编辑 ADDITIONAL DRUMS ENGINEERING：Buckley Buckley[00:26.46]混音室 MIXING STUDIO：mixHaus (Encino, CA)[00:27.48]混音师 MIXING ENGINEER：Richard Furch[00:28.51]后期母带处理制作人 MASTERING PRODUCER：林俊杰 JJ LIN[00:30.87]后期母带处理录音室 MASTERING STUDIO：Bernie Grundman Mastering, LA[00:33.07]后期母带处理录音师 MASTERING ENGINEER：Mike Bozzi[00:34.99]孤单听雨的猫[00:37.35]往时间裂缝里看到了我[00:42.71]雷电交加之外的另一些我[00:50.07]乌云静止以后 跳进平行时空[00:56.29]那些我 旅行中的你我[01:00.25]回忆胡乱穿梭 坠落[01:09.40]交换余生 是我 非我 苦与乐[01:16.87]阴天之后总有续命的晴空[01:23.98]如果我们几经转折 结局一样不动[01:31.60]也才算无愧这分合[02:05.54]定位心海的锚[02:07.87]让时间停顿的像慢动作[02:13.19]你说命运很坏吧幸好有我[02:20.17]如果没有以后 如果平行失控[02:26.81]那些我 不同人生的我[02:30.61]会以什么方式 哭过[02:37.80]交换余生 是我 非我 苦与乐[02:45.50]阴天之后总有续命的晴空[02:52.75]如果我们几经转折 结局一样不动[03:00.38]也才算无愧这分合[03:07.77]云等风 人等梦 爱辗过时光等什么[03:15.44]记不住 认不出 泪眼中谁一样脸红[03:22.50]等你说 等我说 一等就是一个宇宙[03:29.40]日升换月落 真爱换寂寞[03:37.12]交换余生 也许 忘了 第几梦[03:44.20]那时我们身处第几号时空[03:51.96]因为我们手心紧握 记忆也能紧扣[03:59.65]可不怕前方的虫洞[04:07.31]爱是时间的古董'
    }
];

// 音乐的播放

// 一 播放/暂停
var s=true;
var timer;//定时器
var totalTime=0;//总时间

var o=0;//用于定义自动播放下一首的判断变量
function playsong(){
    if(s){
        document.getElementById("audio").play();//点击播放
        s=false;
        document.getElementById("play").className="player";   
        timer=setInterval(gressTime,1000);   
        init();
        // setInterval(lop,4900);        
        // totalTime=document.getElementById("audio").duration;
    }else{
        document.getElementById("audio").pause();//点击暂停
        s=true;
        document.getElementById("play").className="play";
        clearInterval(timer);
        // stop(setInterval(lop));
    }  
}

//歌曲名的hover
function title(){
    document.getElementById("song-name").title=songData[t].songname;
    document.getElementById("song-singer").title=songData[t].singer;
}


//下一首
var t=0;
var l=0;
document.getElementById("next").onclick=function next(){
    t++;
    if(t>songData.length-1){
        t=0;
    };
    document.getElementById("songhead").src=songData[t].songimg;
    document.getElementById("lyric-imgbg").style.backgroundImage="url("+songData[t].songimg+")";
    document.getElementById("song-name").innerText=songData[t].songname;
    document.getElementById("song-singer").innerText=songData[t].singer;
    document.getElementById("songlist-title").innerText=songData[t].songname;
    document.getElementById("audio").src=songData[t].songsrc;
    document.getElementById("audio").play();
    document.getElementById("play").className="player";
    timer=setInterval(gressTime,1000);
    s=false; 
    o++;   
    l++;
    clearsong();
    init();
    title();
    songplay();
    songplay_next();
    changevolume();    
    ss=t;
};

// 上一首
document.getElementById("last").onclick=function(){
    t--;
    if(t<0){
        t=t+4;   
    };
    document.getElementById("songhead").src=songData[t].songimg;
    document.getElementById("lyric-imgbg").style.backgroundImage="url("+songData[t].songimg+")";  
    document.getElementById("song-name").innerText=songData[t].songname;
    document.getElementById("song-singer").innerText=songData[t].singer; 
    document.getElementById("songlist-title").innerText=songData[t].songname;
    document.getElementById("audio").src=songData[t].songsrc;
    document.getElementById("audio").play();  
    document.getElementById("play").className="player";
    timer=setInterval(gressTime,1000);
    s=false; 
    o--;
    l--;
    init();
    title();
    songplay();
    songplay_last();    
}

window.onload=function(){
    // init();
    document.getElementById("col-1").style.visibility="visible";
    document.getElementById("li1").style.background="#000"; 
    document.getElementById("play").className="play"; 
    document.getElementById("audio").volume=0;
    document.getElementById("volume-curr").style.height=0;
    // changevolume();
    // if(document.getElementById("audio").play()){
    //     s=true;
    //     document.getElementById("play").className="play";
    // }
};


//显示对应列表的方法
function songplay(){
    document.getElementById("col-"+[t+1]).style.visibility="visible";
    document.getElementById("li"+[t+1]).style.background="#000";
}

//下一首的歌曲列表加载
function songplay_next(){
    for(let i=1;i<songData.length+1;i++){ 
        if(i==1){
            document.getElementById("col-4").style.visibility="hidden";
            document.getElementById("li4").style.background="#171717";
        }       
        if(i==[t+1]){
            // console.log(t);
            // console.log(i);
            document.getElementById("col-"+i).visibility="visible";
            document.getElementById("li"+i).style.background="#000"
            
            if(i>[t-1]){
                // console.log(t);
                // console.log(i);
            document.getElementById("col-"+[i-1]).style.visibility="hidden";
            document.getElementById("li"+[i-1]).style.background="#171717"; 
            }
            if(i>4){
                i=1;
            }
            if(i==songData.length){
                document.getElementById("col-"+i).style.visibility="visible";
            }
            // console.log(i);
        }
        
    }
}

//上一首的歌曲列表加载
function songplay_last(){
    for(let i=4;i>0;i--){ 
        // console.log(t);
        // console.log(i);
        if(i==[t+1]){
            document.getElementById("col-1").style.visibility="hidden";
            document.getElementById("li1").style.background="#171717";
            if(i<4){
                document.getElementById("col-"+i).style.visibility="visible";
                document.getElementById("li"+i).style.background="#000";
                document.getElementById("col-"+[i+1]).style.visibility="hidden";
                document.getElementById("li"+[i+1]).style.background="#171717";
            }
            if(i<[t+1]){
                // console.log(t);
                // console.log(i);
            document.getElementById("col-"+[i+1]).style.visibility="hidden";
            document.getElementById("li"+[i+1]).style.background="#171717"; 
            }
        }
    };    
}

function clearsong(){
    document.getElementById("lyric-wrap").innerHTML=init();
}

//初始化页面
var ss=0;
var str='';
function init(){
    // console.log(t);
    songData[t].songlyric.split('[').forEach(function(current){
        var h=current.split(']');      
        var lyrics=h[1];
        var q=h[0].split('.');
        var m=q[0].split(':');
        var time=m[0]*60+parseInt(m[1]);
        // console.log(time);
        // console.log(lyrics);
        // console.log(h[0]);{
        if(lyrics){
            str+='<p id="s'+time+'" class="p'+t+'">'+lyrics+'</p>';                    
        }        
    });    
    // document.getElementById().empty();
    // if(t>0){
    //     document.getElementById("p"+[t-1]).style.display="none";
    // }
    // document.getElementById("col-5").innerText=songData[t].sonttime;
    document.getElementById("lyric-wrap").innerHTML=str;
}

//歌曲进度条

/*1.当前播放的时间 2.当前的总长度 3.当前的播放比例*/
function gressTime(){
    // var a=document.getElementById("audio").currentTime;//当前的运动时间
    // var b=document.getElementById("audio").duration;//当前的总时间
    // var c=document.getElementById("playbar-bg").offsetWidth;//当前的总路程
    var n=document.getElementById("audio").currentTime/document.getElementById("audio").duration;//求出播放的比例
    //播放比例的取整
    //在拖动的时候是不能点击按钮的所以实时获取总时间
    //parseInt()
    document.getElementById("cur").style.width=parseInt(n*document.getElementById("playbar-bg").offsetWidth)+'px';
    // document.getElementById("playbar-btn").style.marginLeft=-13+parseInt(n*document.getElementById("playbar-bg").offsetWidth)+'px';
    // console.log(n);
    // console.log(c);
}

//拖动进度条[当前的运动点球当前的运动时间]

/*1.计算拖动点长度 */
document.getElementById("playbar-btn").onmousedown=function(e){
    //鼠标X轴位置
    document.onmousemove=function(e){
        //鼠标移动
        var o=document.getElementById("player-wrap").offsetLeft;
        var x=e.clientX;
        var l=x-o;
        var y=l-187;
        // console.log(y);
        document.getElementById("cur").style.width=y+'px';
        
        var b=parseInt(document.getElementById("cur").style.width)/l;
        // console.log(b);

        var c=b*document.getElementById("audio").duration;
        // console.log(c);
        document.getElementById("audio").currentTime=c;
        // console.log(c);

        // 拖动的时候歌词应该右同步操作
        // gressTime();
    }   
    //鼠标拖动松开应该清空
    document.onmouseup=function(){
        this.onmousedown=null;
        document.onmousemove=null;
    }
}

//音量控制条
var audionum;
document.getElementById("volume-curr-btn").onmousedown=function(e){
    //鼠标Y轴位置
    document.onmousemove=function(e){
        //移动鼠标
        var o1=document.getElementById("playerbar").offsetTop;
        // console.log(o1);
        var y=e.clientY;
        // console.log(y);
        var l1=o1-y;
        // console.log(l1);
        document.getElementById("volume-curr").style.height=l1-6+'px';
        var num=parseInt(document.getElementById("volume-curr").style.height)-2;//取整拖动距离的比例
        audionum=(num/100).toFixed(1);//保留一位小数
        // console.log(audionum);
        if(audionum<0){
            audionum==0;
        }else{
            if(audionum>0){
                audionum==1;
            }
        };
        changevolume();
    }

    document.onmouseup=function(){
        this.onmousedown=null;
        document.onmousemove=null;
    }
}

function changevolume(){
    document.getElementById("audio").volume=audionum;
}

gressTime();

// 歌词同步

var g=0;
var f=0;
var gd=10;
var pre=10;
var wd=1494;
/*1.当前时间 2.数组中歌词的时间*/
document.getElementById("audio").addEventListener('timeupdate',function(){
    // 元素时间和当前时间相等
    var k=parseInt(this.currentTime);
    // console.log(this.currentTime);
    var tt=Math.floor(k/60)+':'+k%60;
    document.getElementById("nowplaytime").innerText='0'+tt+' ';
    document.getElementById("nowdurtime").innerText=songData[t].sonttime;
    // document.getElementById("playtime").innerText='0'+tt+' '+'/'+' '+songData[t].sonttime;
    if(document.getElementById("s"+k)){
        document.getElementById("s"+g).style.color="#bfbfbf"; 
        document.getElementById("s"+g).style.fontSize="12px";       
        g=k;
        document.getElementById("s"+k).style.color="#fff";
        document.getElementById("s"+k).style.fontSize="13px";      
    };
 
},false);

//歌词滚动的方法
function lop(){
    document.getElementById("lyric-wrap").scrollTop=gd;
    gd=gd+1;   
}

function songnameclick1(){
    document.getElementById("audio").src=songData[0].songsrc;
    document.getElementById("audio").play();
}

//自动播放下一首
// var o=0;
document.getElementById("audio").onended=function(){
    // console.log(o);
    o++;
    if(o>songData.length-1){
        o=0;
    };
    // console.log(o);
    document.getElementById("audio").src=songData[o].songsrc;
    document.getElementById("audio").play();
    document.getElementById("play").className="player";
    document.getElementById("songhead").src=songData[o].songimg;
    document.getElementById("lyric-imgbg").style.backgroundImage="url("+songData[o].songimg+")";  
    document.getElementById("song-name").innerText=songData[o].songname;
    document.getElementById("song-singer").innerText=songData[o].singer; 
    document.getElementById("songlist-title").innerText=songData[o].songname;
    s=false;
    t=o;
    title();
};

function songnameclick1(){
    timer=setInterval(gressTime,1000);
    document.getElementById("col-2").style.visibility="hidden";
    document.getElementById("li2").style.background="";

    document.getElementById("col-3").style.visibility="hidden";
    document.getElementById("li3").style.background="";

    document.getElementById("col-4").style.visibility="hidden";
    document.getElementById("li4").style.background="";

    // 歌词背景
    document.getElementById("lyric-imgbg").style.backgroundImage="url(./music/imgages/1.jpg)";
    var imghead=document.getElementById("songhead");
    imghead.src='./music/imgages/1.jpg';
    document.getElementById("audio").src=songData[0].songsrc;
    document.getElementById("audio").play();
    document.getElementById("play").className="player";
    document.getElementById("song-name").innerText="海阔天空";
    document.getElementById("song-singer").innerText="Beyond"; 
    document.getElementById("nowdurtime").innerText=songData[0].sonttime;
    t=0; 
    o=t;  
};



</script>
</html>